
import './index.scss'
import { useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom';
import { Button, Form, Input, Space, Table, PageHeader, Select, Row, Col, Switch, Image, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { getall, del } from '../../../../api/member_interests_ssh'
import format from '../../../../utils/formatDay_ssh'
const { Option } = Select;
const baseUrl = 'http://192.168.221.241:8005/'
//面包屑
const routes = [
    {
        path: '/',
        breadcrumbName: '用户管理',
    },
    {
        path: '/home/user/free-member',
        breadcrumbName: '会员权益',
    },

];
//开关
const onChange = (checked) => {
    console.log(`switch to ${checked}`);
};

const MemberInterests = () => {
    const Navigate = useNavigate()
    const [form] = Form.useForm()
    useEffect(() => {
        getpaymember()
    }, [])
    const [data, setData] = useState([])
    //搜索
    const onFinish = (values) => {
        console.log('Success:', values);
        getall(values).then((res) => {
            setData(res.data)
        })
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    //编辑
    const mod = (value) => {
        console.log(value, 123);
        Navigate('/home/user/Mod_memberinterests', { state: value })

    }
    //新增
    const add = () => {
        Navigate('/home/user/Add_memberinterests')
    }
    //删除
    const delmenber = (id) => {
        del(id).then((res) => {
            console.log(res);
            if (res.code == 200) {
                message.success('删除成功');
            } else {
                message.error('删除失败');
            }
            getpaymember()

        })
    }
    //初始化
    const getpaymember = () => {
        getall().then((res) => {
            // console.log(res);
            let _data = res.data
            _data.forEach((v) => {
                v.equityUpdateTime = format(v.equityUpdateTime)
            });
            setData(_data)
        })
    }
    //表格
    const columns = [
        {
            title: '权益图标',
            dataIndex: 'equityPicture',
            key: 'equityPicture',
            render: (_, record) => (
                <Space size="middle">
                    <Image className='myimg' src={baseUrl + record.equityPicture}></Image>
                </Space>
            ),
        },
        {
            title: '权益名称',
            dataIndex: 'equityName',
            key: 'equityName',
        },
        {
            title: '权益类型',
            dataIndex: 'equityType',
            key: 'address',
        },
        {
            title: '权益说明',
            key: 'equityNote',
            dataIndex: 'equityNote',
        },
        {
            title: '权益状态',
            key: 'equityState',
            render: (_, record) => (
                <Space size="middle">
                    <Switch onChange={onChange} checked={record.equityState == 0 ? true : false}></Switch>
                </Space>
            ),
        },
        {
            title: '最后修改时间',
            key: 'equityUpdateTime',
            dataIndex: 'equityUpdateTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => { mod(record) }}>编辑</a>
                    <a onClick={() => { delmenber(record.equityId) }}>删除</a>
                </Space>
            ),
        },
    ];

    const showTotal = (total) => `数量 ${total} 条`;
    return <div className='MemberInterests'>
        {/* 头部 */}
        <div className="header">
            <PageHeader
                className="site-page-header"
                title="会员权益"
                breadcrumb={{
                    routes,
                }}

            />

            <Form
                form={form}
                name="basic"
                labelCol={{
                    span: 9,
                }}
                wrapperCol={{
                    span: 15,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            ><Row>
                    <Col span={8}><Form.Item
                        label="权益类型"
                        name="equityType" >
                        <Input placeholder="请输入..." />

                    </Form.Item></Col>
                    <Col span={8}> <Form.Item
                        label="权益名称"
                        name="equityName"

                    >
                        <Input placeholder="请输入..." />
                    </Form.Item></Col>
                    <Col span={6}> <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                        className='btn1'
                    >
                        <Button type="primary" htmlType="submit">
                            查询
                        </Button>
                    </Form.Item>
                    </Col>
                    <Col > <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                        className='btn2'
                    >
                        <Button htmlType="submit" onClick={() => {
                            return form.resetFields()
                        }}>
                            重置
                        </Button>
                    </Form.Item></Col>
                </Row>
            </Form>
            {/* 以上为头部 */}
        </div>
        {/* 表格 */}
        <div className="content">
            <div className="top">
                <h3>等级列表</h3>
                <Button type="primary" icon={<PlusOutlined />} className='btn3' onClick={add}>新建</Button>
            </div>
            <Table rowKey={(record) => record.equityId} columns={columns} dataSource={data} pagination={{
                total: data.length,
                showTotal: showTotal,
                showSizeChanger: true,
                showQuickJumper: true,
            }} />
        </div>
    </div>
}
export default MemberInterests;